{include file="public/header" /}
<style>
    .out{
        width: 1200px;
        background-color: #fff;
        margin: auto;
        padding: 30px;
        box-sizing: border-box;
    }


    .time{
        width:160px;
        height:34px;
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
        font-size:12px;
        color:#999;
        padding-left: 10px;
        line-height: 34px;
    }
    .zhi{
        font-size:14px;
        color:#333;
        line-height: 36px;
        margin: 0 10px;
    }
    .all_time{
        display: flex;
        justify-content: flex-start;

    }
    .ka_title{
        font-weight:500;
        color:rgba(51,51,51,1);
        font-size: 18px;
        line-height:25px;
        padding: 0 0 30px 15px;
        position: relative;
    }
    .ka_title span{

        position: absolute;
        width:5px;
        /*height:22px;*/
        background:rgba(42,99,231,1);
        border-radius:3px;
        left: 0;
        top: 43px;
    }
    .chart1{
        width:437px;
        height:342px;
        background:#2A63E7;
        box-shadow:0px 2px 10px 0px rgba(216,216,216,0.5);
        border-radius:5px;
    }
    .chart1_in{
        position: relative;
        top: 5px;
        height: 337px;
        background-color: #fff;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        z-index: 9999;
    }
    .ka_get{
        font-weight:500;
        color:#333;
        font-size: 14px;
        line-height: 22px;
        padding: 20px 20px 0;
    }


    .chart {
        height: 8rem;
        width: 100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 8px 15px 5px rgba(200, 199, 203, 0.3);
        border-radius: 15px;
        margin-top: 0.75rem;
        padding: 1rem;
    }
    .item_two{
        display: flex;
        justify-content: flex-start;
    }

    .c_f_title {
        color: #000000;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .chart_four_item {
        margin-bottom: 40px;
        width: 160px;
        margin-right: 48px;
        float: left;
    }

    .c_f_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .bai {
        color: rgba(0, 0, 0, 0.85);
        font-size: 24px;
    }

    .c_four1 {
        width: 64px;
        height: 64px;
    }
    .chart11 {
        height: 330px;
        z-index: 99999;
    }
    .selectttt22{
        margin-left:30px;
        width:68px;
        height:34px;
        background:dodgerblue;
        border-radius:3px;
        text-align: center;
        line-height:34px;
        font-size:12px;
        font-weight:400;
        color:rgba(255,255,255,1);
        border: none;
    }
</style>
<body class="gray-bg">
<div class="out">
<div class="item">
    <div class="ka_title"><span></span>卡券任务总数：{$data['all_get'] + $data['all_not_get']}</div>
    <div class="item_two">
        <div class="chart1" style="margin-right:90px;">
            <div class="chart1_in">
                <div class="ka_get">卡券领取情况</div>
                <div class="e_item">
                    <div id="main1" class="chart11"></div>
                </div>
            </div>
        </div>
        <div class="chart1">
            <div class="chart1_in">
                <div class="ka_get">卡券核销情况</div>
                <div class="e_item">
                    <div id="main2" class="chart11"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="distribution"></div>
</div>
{include file="public/footer" /}
<script>
    one();
    two();
    function one() {
        var myChart = echarts.init(document.getElementById('main1'));
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
//                bottom: '3%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['领取数量', '剩余数量'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '20%',
                    data: [{$data['all_get']}, {$data['all_not_get']}],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#59ADFE', '#56D2D6'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function two() {
        var myChart = echarts.init(document.getElementById('main2'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['核销数量', '待核销数量']
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: {$data['all_use']}, name: '核销数量'},
                        {value: {$data['all_not_use']}, name: '待核销数量'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#59ADFE', '#56D2D6'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
</body>
</html>
